<template>
    <Content title="维修大厅">
        <view class="maintenance-hall">
            <view class="action-box">
                <u-row justify="space-between" gutter="10" customStyle="margin-bottom: 10px">
                    <u-col span="6">
                        <MySelect v-model="search.categoryName" placeholder="请选择设备等级" :option="grade"
                            @change="onRefresh">
                        </MySelect>
                    </u-col>
                    <u-col span="6">
                        <MySelect v-model="search.maintainGrade" placeholder="请选择维修级别" :option="levels"
                            @change="onRefresh"></MySelect>
                    </u-col>
                </u-row>
                <u-row justify="space-between" gutter="10" customStyle="margin-bottom: 10px">
                    <u-col span="6">
                        <u-input v-model="search.deviceName" class="input" placeholder="请输入设备名称" @change="onRefresh"
                            clearable></u-input>
                    </u-col>
                    <u-col span="6">
                        <u-input v-model="search.deviceNo" class="input" placeholder="请输入设备编号" @change="onRefresh"
                            clearable></u-input>
                    </u-col>
                </u-row>
            </view>
            <view class="header-box">
                <MyNavList :data="headerData" v-model="navIndex"></MyNavList>
            </view>
            <view class="main-box">
                <Empty v-if="data && data.length === 0"></Empty>
                <List ref="orderList" v-else :scrollNoData="scrollNoData" :data="data"
                    :navIndex="headerData[navIndex].status" @onRefresh="onRefresh" @scrollBottom="scrollBottom"></List>
            </view>
        </view>
    </Content>
</template>

<script>
    import MySelect from "@/components/mySelect";
    import Content from "@/components/content/index.vue";
    import Empty from "@/components/empty";
    import List from "./components/list.vue";
    import MyNavList from "@/components/myNavList.vue";
    import fetch from "@/utils/fetch";
    import {
        setPageData
    } from "@/store/user";
    export default {
        components: {
            MySelect,
            Content,
            List,
            MyNavList,
            Empty,
        },
        data() {
            return {
                search: {
                    orderStatus: "",
                    categoryName: "", //设备等级
                    maintainGrade: "", //设备紧急维修程度
                    deviceName: "", //设备名称
                    deviceNo: "", //设备编号
                    pageNum: 1,
                    pageSize: 10,
                    orderSingleStatus: "0",
                },
                navIndex: 0,
                grade: [{
                        label: "A",
                        value: "A"
                    },
                    {
                        label: "B",
                        value: "B"
                    },
                    {
                        label: "C",
                        value: "C"
                    },
                ],
                levels: [{
                        label: "特急",
                        value: "1"
                    },
                    {
                        label: "紧急",
                        value: "2"
                    },
                    {
                        label: "一般",
                        value: "3"
                    },
                ],
                headerData: [{
                        label: "维修确认",
                        status: '0'
                    },
                    {
                        label: "待分配",
                        status: '1'
                    },
                    {
                        label: "升级中",
                        status: '8'
                    },
                    {
                        label: "维修中",
                        status: '5'
                    },
                    {
                        label: "待验收",
                        status: '6'
                    },
                    {
                        label: "已结单",
                        status: '7'
                    },
                    {
                        label: "已驳回",
                        status: '-1'
                    },
                ],
                data: [],
                scroll: false,
                scrollNoData: false,
                isReady: true,
            };
        },
        watch: {
            navIndex() {
                this.getList(true);
            },
        },
        onShow() {
            this.getList(true);
        },
        methods: {
            onRefresh() {
                this.getList(true);
            },
            scrollBottom(next) {
                const that = this;
                if (!that.scrollNoData) {
                    that.search.pageNum = that.search.pageNum + 1;
                    that.scroll = true;
                    that.getList().then(() => {
                        next(that.scrollNoData);
                    });
                    return;
                }
                next();
            },
            getList(arg) {
                const that = this;
                that.$loading.open();
                if (arg) {
                    that.search.pageNum = 1;
                    that.scroll = false;
                    that.scrollNoData = false;
                    that.data = [];
                }
                console.log("that.search", that.search);
                let obj = {};
                for (const key in that.search) {
                    if (Object.hasOwnProperty.call(that.search, key)) {
                        const element = that.search[key];
                        if (element) obj[key] = element;
                    }
                }
                obj.orderSingleStatus = this.headerData[this.navIndex].status;
                obj.orderStatus = [+obj.orderSingleStatus];
                if (obj.orderSingleStatus === '0') {
                    obj.orderStatus = [0];
                }
                if (obj.orderSingleStatus === '8') {
                    obj.orderStatus = [1, 2, 3, 4, 5, 9];
                    obj.workOrderGrade = 8
                }
                if (obj.orderSingleStatus === '-1') {
                    obj.orderStatus = [-1];
                }
                return fetch("post", '/dms/deviceMaintenanceWorkOrder/list', obj).then(
                    ({
                        data
                    }) => {
                        if (that.scroll) {
                            if ((data?.list || []).length === 0) {
                                that.scrollNoData = true;
                            } else {
                                that.data.push(...data?.list);
                                console.log('data1=>', data);
                            }
                        } else {
                            that.data = data?.list || [];
                            console.log('data2=>', that.data);
                        }
                        (that.data || []).forEach(item => {
                            if (item.attachmentDTOs1 && item.attachmentDTOs1.length !== 0) {
                                const arr = item.attachmentDTOs1.map(item => {
                                    return {
                                        ...item,
                                        name: item.fileName,
                                        url: item.filePath,
                                    }
                                });
                                this.$nextTick(() => {
                                    this.$set(item, 'attachmentDTOs', arr);
                                });
                            };
                        });
                        that.$loading.close();
                    }
                );
            },
        },
    };
</script>

<style scoped lang="scss">
    .maintenance-hall {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .header-box {
        display: flex;
        overflow: auto;
        padding: 0 20px;
        margin-bottom: 10px;
        background-color: #ffffff;

        .header-box-item {
            flex: 1;
            width: 100px;
            min-width: 100px;
            height: 40px;
            line-height: 40px;
            border: 1px solid #e0e0e0;
            text-align: center;
        }
    }

    .action-box {
        width: 100%;
        padding: 10px 20px;
        margin-bottom: 10px;
        background-color: #ffffff;
    }

    .main-box {
        flex: 1;
        overflow: auto;
    }
</style>